{extend name="common/layout" /}

{block name="style"}
<style>
    .layui-card-body { display: flex !important; }
    .phone { position: relative; margin-right: 25px; width: 360px; min-width: 360px; height: 615px; border: 1px solid #dddddd; color: #333333; background-color: #f7f7f7; }
    .phone .customer { display: flex; align-items: center; flex-direction: column; margin: 20px; padding: 50px 0; border-radius: 6px; background-color: #ffffff; }
    .phone .customer .image { display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; background-color: #f8f8f8; }
    .phone .customer .image i { font-size: 32px; color: #999999; }
    .phone .customer .text { margin-top: 10px; font-size: 15px; font-weight: 500; }
    .phone .customer .info { margin-top: 20px; color: #666666; }
    .phone .customer .info div { margin: 4px 0; }
    .phone .customer .btn { margin-top: 30px; padding: 10px 0; width: 200px; border-radius: 30px; text-align: center; color: #ffffff; background-color: var(--theme-color); }
    .editor { width: 400px; }
    .editor .layui-form-label { width: 55px; }
    .editor .layui-input-block { margin-left: 85px; }
</style>
{/block}

{block name="body"}
<div class="container layui-form" lay-filter="form-filter">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 手机端 -->
            <script id="phoneTpl" type="text/html">
                <div class="phone">
                    <div class="customer">
                        <div class="image">
                            {{#  if(d.image){ }}
                                <img src="{{ d.image }}" alt="img" class="w-h-full">
                            {{#  } else { }}
                                <i class="layui-icon layui-icon-picture"></i>
                            {{#  } }}
                        </div>
                        <div class="text">{{ d.title }}</div>
                        <div class="info">
                            {{#  if(d.datetime){ }}
                                <div class="datetime">服务时间：{{ d.datetime }}</div>
                            {{#  } }}
                            {{#  if(d.mobile){ }}
                                <div class="mobile">客服电话：{{ d.mobile }}</div>
                            {{#  } }}
                            {{#  if(d.qq){ }}
                                <div class="mobile">联系Q Q：{{ d.qq }}</div>
                            {{#  } }}
                        </div>
                        <div class="btn">保存二维码</div>
                    </div>
                </div>
            </script>
            <div id="phoneView"></div>
            <!-- 编辑器 -->
            <div class="editor">
                <fieldset class="layui-elem-field">
                    <legend>客服设置</legend>
                    <div class="layui-field-box">
                        <div class="layui-form-item">
                            <label for="title" class="layui-form-label">客服标题</label>
                            <div class="layui-input-block">
                                <input type="text" id="title" name="title" value="{$detail.title}"
                                       placeholder="请输入客服标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="datetime" class="layui-form-label">服务时间</label>
                            <div class="layui-input-block">
                                <input type="text" id="datetime" name="datetime" value="{$detail.datetime}"
                                       placeholder="请输入服务时间" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="mobile" class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" id="mobile" name="mobile" value="{$detail.mobile}"
                                       placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="qq" class="layui-form-label">联系QQ</label>
                            <div class="layui-input-block">
                                <input type="text" id="qq" name="qq" value="{$detail.qq}"
                                       placeholder="请输入联系QQ" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">二维码图</label>
                            <div class="layui-input-block">
                                <div class="thumbnail" data-type="image" data-limit="1">
                                    <div class="musters">
                                        <div class="preview {if !$detail.image}layui-hide{/if}">
                                            <em class="layui-icon layui-icon-close"></em>
                                            <input type="hidden" id="image" name="image" value="{$detail.image}">
                                            <img src="{$detail.image}" alt="img">
                                        </div>
                                    </div>
                                    <div class="builder {if $detail.image}layui-hide{/if}">
                                        <i class="layui-icon layui-icon-camera"></i>
                                        <p>二维码</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <!-- 提交按钮 -->
                <div style="margin-top:20px;">
                    <button class="layui-btn layui-btn-default {:check_perms('save', false)}" lay-submit lay-filter="addForm">保存配置</button>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'laytpl'], function() {
        let $ = layui.$;
        let form = layui.form;
        let laytpl = layui.laytpl;

        // 渲染方法
        function renderTpl(data) {
            let getTpl = document.getElementById('phoneTpl').innerHTML;
            let view = document.getElementById('phoneView');
            laytpl(getTpl).render(data, function(html){
                view.innerHTML = html;
            });
        }

        // 渲染数据
        renderTpl(JSON.parse('{$jsonp|raw}'));

        // 输入框变化
        $(document).on('input', '.editor input', waitUtil.debounce(200, function () {
            renderTpl(form.val('form-filter'));
        }));

        // 上传二维码
        $(document).on('click', '.thumbnail .builder', function (e) {
            e.preventDefault();
            const that = $(this);
            waitUtil.uploader().then(data => {
                const preNode = that.prev().children('.preview');
                that.addClass('layui-hide');
                preNode.removeClass('layui-hide');
                preNode.children('img').attr('src', data[0].url);
                preNode.children('input').val(data[0].url);
                renderTpl(form.val('form-filter'));
            });
        });

        // 删除二维码
        $(document).on('click', '.thumbnail .layui-icon-close', function (e) {
            e.preventDefault();
            const that = $(this);
            that.parent().addClass('layui-hide');
            that.parent().children('img').attr('src', '');
            that.parent().children('input').val('');
            that.parent().parent().next().removeClass('layui-hide');
            renderTpl(form.val('form-filter'));
        });

        // 提交表单
        form.on('submit(addForm)', function(data){
            layer.confirm('确定保存当前配置吗?', function(index) {
                layer.close(index);
                waitUtil.ajax({
                    url: '{:route("diy.contact/save")}',
                    type: 'POST',
                    data: data.field
                });

                renderTpl(data.field)
            });
        });
    });
</script>
{/block}